<template>
    <div :class="[
            size ? 'mmv-follow-button-' + size : '',
            {
                'mmv-follow-button--follow':self_following
            }
        ]" @click="onClick" class="mmv-follow-button">
        <span>{{followText}}</span>
    </div>
</template>

<script>
export default {
    name: "mmv-follo-button",
    props: {
        uid: {
            type: [Number, String],
            required: true,
        },
        is_follow: {
            type: Boolean,
            default: false,
        },
        is_followed: {
            type: Boolean,
            default: false,
        },
        is_following: {
            type: Boolean,
            default: false,
        },
        size: String,
    },
    data() {
        return {
            self_following: this.is_following,
        };
    },
    computed: {
        followText() {
            let text;
            if (this.self_following === true) {
                text = "已关注";
                if (this.is_followed === true) {
                    text = "互相关注";
                }
            } else {
                text = "关注";
            }
            return text;
        },
    },
    methods: {
        onClick() {
            this.self_following = !this.self_following;
        },
    },
};
</script>

<style lang="less">
.mmv-follow-button {
    background-color: #00c3ff;
    border-radius: 13px;
    height: 26px;
    line-height: 26px;
    font-size: 14px;
    width: 70px;
    display: inline-block;
    color: #fff;
    text-align: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: 0.2s background-color;
    user-select: none;

    &:not(&--follow):not(&--follow-followed):hover {
        background-color: #00d5ff;
    }
    &&-md {
        width: 80px;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
    }
    &&-lg {
        width: 86px;
        height: 34px;
        line-height: 32px;
        background-color: #fff;
        color: #00b2ff;
        border: 1px solid #00c3ff;
        border-radius: 4px;
        transition-duration: 0.2s;
        transition-property: border-color, color;
    }
    &&-lg:not(&--follow):not(&--follow-followed):hover {
        background-color: #fff;
        border-color: #00d5ff;
        color: #00d5ff;
    }
    &--follow-followed,
    &--follow {
        background-color: #f5f5f5;
        color: #999;
    }
    &--follow-followed&-lg,
    &--follow&-lg {
        color: #666;
        border-color: #ccc;
    }
    span {
        vertical-align: top;
        display: inline-block;
    }
}
</style>